<script setup lang="ts">
	import SectionTitle from '@/wxcomponents/section-title'
	import PrizeBoxListItem from '@/wxcomponents/prize-box-list-item'
	import MainWrapper from '@/wxcomponents/main-wrapper'
	import { onLoad } from "@dcloudio/uni-app";
	import { listYiFanShangBoxes } from "@/api/yifanshang";

	import { onMounted, ref,watch } from 'vue'
	import detail from "@/pages/pk/detail.vue";
  let props = defineProps<{
    id: number,
	count:number,
	type:string
  }>()
	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}
watch(props.count,(nval,oval) => {
	num.value = nval;
})
	const COUNT_PER_GROUP = 10

	const MAX_BOXES = ref(0)
	const gameId = ref(0)
	const num = ref(0)
	const gameType = ref('')
	const groups = ref([])
	const boxList = ref([])
	
	function initGroups(count) {
		let i = 1;
		const MAX_COUNT = count
		while (i <= MAX_COUNT && i + COUNT_PER_GROUP <= MAX_COUNT) {
			const start = i;
			const nextStart = i + COUNT_PER_GROUP;
			const end = nextStart - 1;
			groups.value.push(`${start}-${end}箱`);
			i = nextStart;
		}

		if (i <= MAX_COUNT) {
			groups.value.push(`${i}-${MAX_COUNT}箱`);
		}
	}

	function gotoOuhuangshang(box) {
		uni.navigateTo({
			url: `/pages/index/ouhuangshang?id=${gameId.value}&index=${box.index}`
		})
	}

	async function changeBox(groupIndex) {
		num.value = groupIndex
		const start = COUNT_PER_GROUP * groupIndex + 1
		let end = start + COUNT_PER_GROUP
		end = Math.min(end, MAX_BOXES.value)
		boxList.value = await getGroupBoxes(gameId.value, gameType.value, start, end)
	}
	// initGroups()

	async function getGroupBoxes(gameId, gameType, start = 1, end = 1) {
		const params = {
			game_id: gameId,
			game_type: gameType,
			start,
			end
		}
		const res = await listYiFanShangBoxes(params)
		const data = res.data || {}
		const items = data.items || [];
		for (let i = 0; i < items.length; i++) {
			items[i]['box_name'] = '第' + items[i]['index'] + '箱'
		}
		return items
	}

	onMounted(async () => {
		const id = props.id || 0
		const count = props.count || 0
		const game_type = props.type || '欧皇赏'
		gameId.value = id
		gameType.value = game_type

		MAX_BOXES.value = count
		if (count) {
			initGroups(count)
		}

		const begin = 1
		const end = count > 10 ? 10 : count
		const items = await getGroupBoxes(id, game_type, begin, end)

		for (let i = 0; i < items.length; i++) {
			items[i]['box_name'] = '第' + (i + 1) + '箱'
		}
		boxList.value = items
	});
</script>

<template>
	<view>
		<view class="box-group-list" style="margin-top: 20rpx;margin-bottom: 20rpx;">
			<text class="box-group" v-for="(g, index) in groups" :key="index" :class="[index==num?'select':'']"
				@click="() => changeBox(index)">{{ g }}</text>
		</view>

		<view class="prize-list">
			<prize-box-list-item v-for="(item, index) in boxList" :key="index" :badge="item.box_name"
				:soldout="item.has_sell_out" :items="item.prizes.slice(0, 6)" class="prize-item"
				@click="() => gotoOuhuangshang(item)">
			</prize-box-list-item>
		</view>
	</view>
</template>


<style lang="scss">
	@import 'src/static/scss/maincommon';

	.box-group-list {
		min-width: 100%;
		width: auto;
		overflow-x: auto;
		color: white;
		font-size: 15px;
		display: flex;
		align-items: center;
		gap: 26px;
		height: 40px;

		.box-group {
			min-width: fit-content;
			font-weight: 600;
		}
	}

	.prize-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: auto;

		.prize-item {
			width: 100%;
		}
	}
	.select {
		color: #FFDD86;
	}
</style>